<template>
  <div class="page-design">
    <div class="edit-button">
      <div class="button">
        <div>
          <a-button type="primary" shape="round" :size="'small'" @click="clicksave">结束设计</a-button>
          <a-button style="margin-left: 15px" shape="round" :size="'small'" @click="clicklayoutSelect">
            选择布局
          </a-button>
        </div>
        <a-button shape="round" :size="'small'" @click="clickCZ">重置</a-button>
      </div>
      <div class="title">页面设计</div>
    </div>
    <!-- 布局组件     -->
    <div id="layout-component">
      <component
        :is="menuList.layout[0].com"
        v-if="menuList.layout && menuList.layout.length && menuList.layout[0].com"
        :layout-id="menuList.layout[0].id"
        :is-edit="true"
        :portlet-list="menuList.portlets"
        @add-portlet="evt_addPortlet"
      ></component>
    </div>
    <!-- 小组件选择     -->
    <portletSelect
      v-show="isShowPortletSelecPage"
      :parent-info="parentInfo"
      :menu-list="menuList"
      @portlet-selected="portletSelected"
      @evt_ps_close="evt_ps_close"
    ></portletSelect>
    <!-- 布局选择       -->
    <layoutSelect
      v-if="isShowLayoutSelecPage"
      :menu-list="menuList"
      @layout-selected="layoutSelected"
      @evt_ls_close="evt_ls_close"
    ></layoutSelect>
  </div>
</template>

<script setup>
import { toRefs, ref, defineProps, defineEmits, onMounted, nextTick } from 'vue'
import { CloseCircleOutlined } from '@ant-design/icons-vue'
import layoutSelect from './components/layoutSelectPage/layoutSelect'
import portletSelect from './components/portletSelectPage/portSelect'
import regCom from '@/utils/registerComFunV2'
import html2canvas from 'html2canvas'
const props = defineProps({
  menuList: { type: Array, default: () => [] },
})
const { menuList } = toRefs(props)
const regcom = () => {
  menuList.value.layout &&
    menuList.value.layout.forEach((m) => {
      m.com = regCom(m.html)
    })
  menuList.value.portlets &&
    menuList.value.portlets.forEach((m) => {
      m.com = regCom(m.html, m.imageParams)
    })
}
regcom()
//备份数据, 可重置
const backupData = ref({
  lay: JSON.parse(JSON.stringify(menuList.value.layout)),
  port: JSON.parse(JSON.stringify(menuList.value.portlets)),
})

//==小组件选择====================
const isShowPortletSelecPage = ref(false)
const parentInfo = ref({})
const evt_addPortlet = (pInfo) => {
  //pInfo:布局组件传出parentId 与 parentSection, 小组件添加时保存参数
  isShowPortletSelecPage.value = true
  parentInfo.value = pInfo
}
const portletSelected = () => {
  isShowPortletSelecPage.value = false
  regcom()
  console.log('获得编辑后的page', menuList.value)
}
const evt_ps_close = () => {
  isShowPortletSelecPage.value = false
}

//==布局选择=============
const isShowLayoutSelecPage = ref(false)
const clicklayoutSelect = () => {
  debugger
  isShowLayoutSelecPage.value = true
}
const layoutSelected = () => {
  isShowLayoutSelecPage.value = false
  regcom()
  nextTick(() => {
    changeDivWdith()
  })
}
const evt_ls_close = () => {
  isShowLayoutSelecPage.value = false
}

//=========
const emit = defineEmits(['quitEdit'])
const clicksave = () => {
  let img64
  //==元素转base64图片
  let element = document.getElementById('layout-component')
  html2canvas(element.children[0], { useCORS: true }).then((res) => {
    img64 = res.toDataURL('image/jpeg')
    menuList.value.newImg = img64
    console.log('结束设计后的page', menuList.value)
    emit('quitEdit', '')
  })
}
//==重置====
const clickCZ = () => {
  menuList.value.layout = JSON.parse(JSON.stringify(backupData.value.lay))
  menuList.value.portlets = JSON.parse(JSON.stringify(backupData.value.port))
  regcom()
}

//设置包裹布局的div的宽度
onMounted(() => {
  changeDivWdith()
})
const changeDivWdith = () => {
  let ele = document.getElementById('layout-component')
  if (ele.children && ele.children.length) {
    ele.style.width = ele.children[0].style.width
    console.log('设置预览区大小', ele.style.width)
  } else {
    setTimeout(() => {
      changeDivWdith()
    }, 100)
  }
}
</script>

<style lang="less" scoped>
.page-design {
  //display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 0px);
  overflow: auto;
  user-select: none;
  //position: relative;
  .edit-button {
    position: relative;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid black;

    .button {
      display: flex;
      justify-content: space-between;
      padding: 4px 40px;
    }

    .title {
      position: absolute;
      top: 0;
      left: 50%;
      font-weight: bolder;
      font-size: 18px;
    }
  }

  .comtop32 {
    position: absolute;
    top: 32px;
  }
}
</style>
